<template>
    <div class="loadingCorreo">
        <!-- Animacion de transicion de eventos  -->
        <div id="pageloader" class="loadingCorreoChile d-none">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 80 80"
                width="80"
                height="80"
                preserveAspectRatio="xMidYMid meet"
                style="
                    width: 100%;
                    height: 100%;
                    transform: translate3d(0px, 0px, 0px);
                    content-visibility: visible;
                "
            >
                <defs>
                    <clippath id="__lottie_element_2">
                        <rect width="80" height="80" x="0" y="0"></rect>
                    </clippath>
                </defs>
                <g clip-path="url(#__lottie_element_2)">
                    <g
                        transform="matrix(1.440000057220459,0,0,1.440000057220459,39.5,53.875)"
                        opacity="1"
                        style="display: block"
                    >
                        <g
                            opacity="1"
                            transform="matrix(0.9744899868965149,0,0,0.9744899868965149,0.550000011920929,-9.508999824523926)"
                        >
                            <path
                                stroke-linecap="butt"
                                stroke-linejoin="miter"
                                fill-opacity="0"
                                stroke-miterlimit="4"
                                stroke="rgb(255,255,255)"
                                stroke-opacity="0.2"
                                stroke-width="2"
                                d=" M0,-25.74049949645996 C14.206181526184082,-25.74049949645996 25.74049949645996,-14.206181526184082 25.74049949645996,0 C25.74049949645996,14.206181526184082 14.206181526184082,25.74049949645996 0,25.74049949645996 C-14.206181526184082,25.74049949645996 -25.74049949645996,14.206181526184082 -25.74049949645996,0 C-25.74049949645996,-14.206181526184082 -14.206181526184082,-25.74049949645996 0,-25.74049949645996z"
                            ></path>
                        </g>
                    </g>
                    <g
                        transform="matrix(1.440000057220459,0,0,1.440000057220459,39.5,53.875)"
                        opacity="1"
                        style="display: block"
                    >
                        <g
                            opacity="1"
                            transform="matrix(0.9744899868965149,0,0,0.9744899868965149,0.550000011920929,-9.508999824523926)"
                        >
                            <path
                                id="rotoge"
                                stroke-linecap="round"
                                stroke-linejoin="miter"
                                fill-opacity="0"
                                stroke-miterlimit="4"
                                stroke="rgb(214,23,1)"
                                stroke-opacity="1"
                                stroke-width="2"
                                d=" M0,-25.74049949645996 C14.206181526184082,-25.74049949645996 25.74049949645996,-14.206181526184082 25.74049949645996,0 C25.739999771118164,8.687999725341797 21.426000595092773,16.37700080871582 14.824999809265137,21.038999557495117"
                            ></path>
                        </g>
                    </g>
                    <g
                        transform="matrix(0.5799999833106995,0,0,0.5799999833106995,13.900001525878906,26.65999984741211)"
                        opacity="1"
                        style="display: block"
                    >
                        <g
                            opacity="1"
                            transform="matrix(1,0,0,1,23.570999145507812,35.96500015258789)"
                        >
                            <path
                                fill="rgb(255,255,255)"
                                fill-opacity="1"
                                d=" M-9.62600040435791,-9.59000015258789 C-18.11400032043457,-2.5329999923706055 -23.57200050354004,3.2079999446868896 -23.57200050354004,3.2079999446868896 C13.859000205993652,-8.975000381469727 23.57200050354004,9.59000015258789 23.57200050354004,9.59000015258789 C23.57200050354004,9.59000015258789 16.378999710083008,-6.630000114440918 -9.62600040435791,-9.59000015258789z"
                            ></path>
                        </g>
                        <g
                            opacity="1"
                            transform="matrix(1,0,0,1,48.2140007019043,23.868000030517578)"
                        >
                            <path
                                fill="rgb(255,255,255)"
                                fill-opacity="1"
                                d=" M33.21500015258789,-20.44700050354004 C30.70199966430664,-21.200000762939453 24.361000061035156,-21.687000274658203 19.996999740600586,-21.374000549316406 C1.194000005722046,-20.840999603271484 -19.680999755859375,-8.472999572753906 -33.21500015258789,1.2519999742507935 C-6.557000160217285,5.460000038146973 0.2150000035762787,21.687000274658203 0.2150000035762787,21.687000274658203 C5.189000129699707,0.8809999823570251 33.21500015258789,-20.44700050354004 33.21500015258789,-20.44700050354004z"
                            ></path>
                        </g>
                        <g
                            opacity="1"
                            transform="matrix(1,0,0,1,39.643001556396484,11.98799991607666)"
                        >
                            <path
                                fill="rgb(255,255,255)"
                                fill-opacity="1"
                                d=" M-39.643001556396484,10.769000053405762 C-34.66299819946289,10.82800006866455 -30.183000564575195,11.265999794006348 -26.172000885009766,11.98799991607666 C-12.637999534606934,2.257999897003174 8.189000129699707,-10.052000045776367 26.81800079345703,-10.324000358581543 C30.860000610351562,-10.560999870300293 36.59000015258789,-10.064000129699707 39.35100173950195,-9.329999923706055 C-1.437999963760376,-21.249000549316406 -39.643001556396484,10.769000053405762 -39.643001556396484,10.769000053405762z M39.56999969482422,-9.305999755859375 C39.590999603271484,-9.293999671936035 39.61199951171875,-9.293999671936035 39.643001556396484,-9.281999588012695 C39.61199951171875,-9.293999671936035 39.590999603271484,-9.293999671936035 39.56999969482422,-9.305999755859375z"
                            ></path>
                        </g>
                        <g
                            opacity="1"
                            transform="matrix(1,0,0,1,74.9990005493164,14.38599967956543)"
                        >
                            <path
                                fill="rgb(255,255,255)"
                                fill-opacity="1"
                                d=" M6.827000141143799,-9.59000015258789 C6.939000129699707,-9.557000160217285 -4.968999862670898,-1.4240000247955322 -15,9.59000015258789 C-0.4180000126361847,-5.214000225067139 15,-6.4770002365112305 15,-6.4770002365112305 C11.225000381469727,-8.25 6.827000141143799,-9.59000015258789 6.827000141143799,-9.59000015258789z"
                            ></path>
                        </g>
                    </g>
                </g>
            </svg>
        </div>
    </div>
</template>

<script>
export default {
    methods: {},
};
</script>

<style  lang="scss">
.mask {
    
}
.loadingCorreo {
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    font-size: 1.2em;
    background-color: #999;
    top: 0;
    left: 0;
    z-index: 2000;
}
.text-loading {
    position: fixed;
    top: 20%;
    left: 42%;
    z-index: 99998;
    width: 300px;
    margin-top: 50px;
    margin-left: -75px !important;
    text-align: center;
}

.loadingCorreoChile {
    height: 100vh;
    font-size: 1.2em;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 600px) {
    .loadingCorreoChile {
        width: 50%;
    }
}

@media screen and (min-width: 600px) {
    .loadingCorreoChile {
        width: 10%;
    }
}
#rotoge {
    animation: circle 0.8s linear 0s infinite;
}
@keyframes circle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>